<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script  src="../js/vue.js"></script>
<script  src="../js/jquery.min.js"></script>
</head>

<body>
   <div id="app">
    <register-div @pregister="uregister"></register-div>
   </div>

<template id="resgiterDiv">
<div>
<div>
 name:<input v-model="user.user_name" v-on:mouseleave="checkUserName" :mouseover="reset(0)"><span v-if="formTest.uflag" style="color:red;"> {{formTest.umess}}</span>
</div>
<div>
 password:<input type="password" v-model="user.password" :mouseover="reset(1)">
</div>
<div>
 phone:<input  v-model="user.phone" :mouseover="reset(2)">
</div>
   <input type='button' value="注册" v-on:click="register">
   
   </div>
</template>

<script>
let register={
template:'#resgiterDiv',
data:function(){
 return{
  user:{user_name:'',password:'',age:'25',phone:''},
  formTest:{uflag:false,pflag:false,phflag:false,umess:'',pmess:'',phmess:''}
 }
},
methods:{
register:function(){
this.$emit('pregister',this.user);
},
checkUserName:function(){
let this_=this;
let user_name=this_.user.user_name;
if (user_name == ''){
    this_.formTest.uflag=true;
	this_.formTest.umess='user_name is not null';
}
},
reset:function(i){
let this_=this;
switch(i){
case 0:
this_.formTest.uflag=false;
this_.formTest.umess='';
break;

case 1:
this_.formTest.pflag=false;
this_.formTest.pmess='';
break;
case 2:
this_.formTest.phflag=false;
this_.formTest.phmess='';
break;
default:
break;
}

}

}

}


Vue.component('register-div',register);

// 定义路由
new Vue({
    el:"#app",
	methods:{
	uregister:function(data){
    console.log(data);	
	
	$.ajax({
                url : "http://localhost:8080/lingSweet/register",
                type : "POST",
                contentType : "application/json; charset=utf-8",
                data : JSON.stringify(data),
                dataType : 'json',
                success : function(data) {
                  if(data.status=='200'){
				  window.location.href="http://localhost:8888/index";
				  }
                }
            });
	
	
	
	}
	}
});
</script>

</body>


</html>